<template>
  <div class="menu-container">
    <h3>商品分类</h3>
    <ul class="menu-list">
      <li
        v-for="(item, index) in menuItems"
        :key="item.id"
        @click="handleClick(index + 1)"
        :class="{ active: currentIndex === index + 1 }"
      >
        {{ item.name }}
      </li>
    </ul>
  </div>
</template>

<script setup>
import { ref } from "vue";

// 定义菜单数据
const menuItems = [
  { id: "phone", name: "手机" },
  { id: "laptop", name: "笔记本" },
  { id: "accessory", name: "配件" },
];

// 定义当前选中项
const currentIndex = ref(1);

// 定义事件
const emit = defineEmits(["menu-change"]);

// 处理点击事件
const handleClick = (index) => {
  currentIndex.value = index;
  emit("menu-change", index);
};
</script>

<style scoped>
.menu-container {
  height: 1000px;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  overflow: hidden;
}

.menu-container h3 {
  margin: 0;
  padding: 15px;
  background-color: #f5f5f5;
  border-bottom: 1px solid #e0e0e0;
  color: #333;
}

.menu-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.menu-list li {
  padding: 15px 20px;
  cursor: pointer;
  transition: background-color 0.3s;
  border-bottom: 1px solid #e0e0e0;
}

.menu-list li:last-child {
  border-bottom: none;
}

.menu-list li:hover {
  background-color: #f0f7ff;
}

.menu-list li.active {
  background-color: #e6f7ff;
  color: #1890ff;
  font-weight: bold;
}
</style>
